完成智慧醫院管理平台第一階段的Figma Wireframe、UI Design與Prototype後，下一步就是把設計真正實作成網頁。

一開始我的想法很單純：

「先把Figma的畫面用HTML和CSS做出來。」

因此這一天沒有直接開始使用Angular，而是先從自己比較熟悉的HTML、CSS開始，嘗試理解：

Figma UI -> HTML 結構 -> CSS 樣式 -> 瀏覽器畫面

實際開始做之後，我才發現：

把Figma畫面轉成網頁，並不是單純照著畫面寫CSS。

真正需要思考的是：

Figma裡看到的每一個區塊，在HTML裡應該怎麼拆？

一、先從Header開始實作

我決定先從首頁最上面的Header開始。

Figma裡的Header大致包含：

• Logo
• 首頁
• 醫院介紹
• 醫師查詢
• 掛號
• 就醫資訊
• 登入按鈕

所以我先將它拆成 HTML：

<header>
    <h1>SmartCare Hospital</h1>

    <nav>
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">醫院介紹</a></li>
            <li><a href="#">醫師查詢</a></li>
            <li><a href="#">掛號</a></li>
        </ul>
    </nav>
</header>

這時候我第一次比較明顯感受到：

Figma是視覺設計工具，而HTML是在描述網頁的結構。

所以不能看到一個矩形就直接想成一個CSS div，而是要先思考這個區塊在網站中代表什麼。

二、遇到第一個問題：Logo為什麼沒有出現？

接著我使用CSS的 background-image放置Logo：

background-image: url(image/logo.png);

但是圖片沒有顯示。
一開始我以為是圖片檔案有問題，後來才發現是相對路徑的問題。

當時的專案結構是：

Smart-Hospital
├── index.html
├── css
│   └── style.css
└── image
    └── logo.png

因為style.css位於css資料夾：

css/style.css

所以：

url(image/logo.png)

實際上會被理解成：

css/image/logo.png

但真正的圖片位置是：

image/logo.png

因此需要先回到上一層：

background-image: url(../image/logo.png);

這是我第一次比較完整地理解：

CSS中的相對路徑，是以CSS檔案所在位置作為判斷基準。

而不是以專案根目錄作為基準。

三、Logo太大怎麼辦

圖片成功顯示後，又遇到了另一個問題。

Logo雖然出現了，但是尺寸和Figma裡的設計差很多。

一開始我嘗試直接修改：

width
height

但是圖片縮放後並沒有呈現我想要的效果。

後來了解到可以使用：

background-size: contain;

讓背景圖片在指定區域內保持原本比例縮放。

這讓我開始理解：

圖片大小問題不一定只是修改width和height，還要考慮圖片本身的比例以及背景圖片的縮放方式。

四、第一次真正理解Flexbox的父子關係

接下來開始處理Header的排版。

我希望Logo在左邊、導覽列在右邊，所以先在Header使用：

header {
    display: flex;
}

結果發現：

Header裡面的h1和 nav確實變成橫向排列了。
但是導覽列裡面的還是直的。

當時的HTML結構是：

<header>
    <h1></h1>

    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</header>

後來才理解：

header {
    display: flex;
}

只會影響Header的直接子元素：

header
├── h1
└── nav

它不會直接控制：

nav
└── ul
    ├── li
    ├── li
    └── li

所以如果我要讓 橫向排列，就要對它們的父元素 使用Flexbox：

header ul {
    display: flex;
}

這次讓我真正理解一個很重要的CSS概念：

　Flexbox是控制「子元素排列」的工具，而不是設定在最外層後，所有內部元素都會一起受到影響。

五、開始思考：不要一直用margin把東西推來推去

開始製作Hero區域後，我遇到很多「位置差一點」的問題。

一開始我的做法很直覺：

margin-top: 30px;

不夠就：

margin-top: 50px;

還是不對再繼續調整。

雖然最後可能可以把畫面「推」到想要的位置，但這讓我開始思考：

如果每個元素都靠margin調位置，那之後內容改變怎麼辦？

後來開始嘗試使用Flexbox：

display: flex;
align-items: center;

讓父元素控制子元素的排列方式。

這讓我了解到：

CSS不只是把元素推到指定位置，而是應該先思考整個區塊的排列方式。

六、margin、padding到底差在哪裡？

在調整Hero的文字位置時，我也遇到了另一個問題。

一開始使用：

margin-left

把文字往右移。

後來發現如果真正需要的是「這個區塊內部的空間」，可能比較適合使用：

padding-left

但是增加Padding後，整個區塊的寬度也跟著改變，甚至影響到圖片位置。

這讓我開始發現：

margin
padding
gap
width
Flexbox

這些CSS屬性其實不是獨立存在的。

當版面出現問題時，不能只想：

「我要把這個東西往右移。」

而是要先思考：

「到底是哪一層的元素需要調整？」

七、把Figma的卡片拆成HTML

完成Hero後，開始製作首頁的「快速服務」。

Figma裡看到的是四張卡片：

一開始不知道應該怎麼把它轉成HTML。

後來我開始把每張卡片視為一個獨立的容器：

<div class="service-card">
    ...
</div>

整個結構就變成：

快速服務
│
├── service-card
│   ├── icon
│   └── 立即預約
│
├── service-card
│   ├── icon
│   └── 醫師查詢
│
├── service-card
│   ├── icon
│   └── 查詢預約
│
└── service-card
    ├── icon
    └── 就醫資訊

再透過：

border
width
height
border-radius
display: flex

建立卡片的外觀。

這次實作讓我發現：

很多看起來複雜的UI，其實都是由HTML結構與CSS基礎屬性組合而成。

真正困難的不是記住每一個CSS屬性，而是：

如何把Figma的視覺畫面拆解成合理的HTML結構。

八、今日收穫

今天原本只是想「把Figma做成HTML」。

但實際做完之後，我發現自己開始從另一個角度看網頁：

以前看到：

Logo在左邊、導覽列在右邊。

現在會開始想：

Header
├── Logo
└── Navigation

然後再思考：

哪一層使用Flexbox？

看到卡片時，也會開始想：

Section
└── Card List
    ├── Card
    ├── Card
    ├── Card
    └── Card

這讓我開始建立「從畫面反推HTML結構」的能力。

九、今日學習

• 學習如何將Figma UI拆解成HTML結構
• 學習CSS相對路徑
• 學習background-size: contain
• 理解Flexbox父子元素關係
• 理解margin、padding、gap的差異
• 使用Flexbox建立Header與Hero
• 使用HTML/CSS建立UI卡片
• 開始理解如何從視覺設計思考網頁結構

十、AI協助

這次開發過程中，我沒有直接請 AI 產生完整首頁，而是遇到問題後再詢問。

主要使用 AI 協助：

• 分析圖片路徑錯誤
• 理解Flexbox父子元素關係
• 判斷margin與padding的使用情境
• 協助檢查CSS版面問題
• 理解Figma UI如何拆解成HTML結構

我的開發方式主要是：

自己嘗試 ->遇到問題 -> 分析原因 -> 詢問 AI ->理解觀念 ->自己修改 -> 重新測試

十一、今日成果